<script lang="ts" setup>
import { reactive } from 'vue'

const config = reactive({
  header: [],
  data:  [
    ['鑫达','12台','入库','2024-03-09 15:12'],
    ['鑫达','12台','入库','2024-03-09 15:12'],
    ['鑫达','12台','出库','2024-03-09 15:12'],
    ['鑫达','12台','入库','2024-03-09 15:12'],
    ['鑫达','12台','入库','2024-03-09 15:12'],
    ['鑫达','12台','入库','2024-03-09 15:12'],
    ['鑫达','12台','入库','2024-03-09 15:12'],
    ['鑫达','12台','入库','2024-03-09 15:12'],
  ].map((item,sectionIndex)=>{
    return item.map((content,cellIndex)=>{
        return '<div style="color:' + ((cellIndex == 2) ? ['rgb(125,198,129)','rgb(152,70,113)','rgb(150,179,216)'][sectionIndex % 3] : 'rgb(150,179,216)') + ';font-size:12px;text-align:center;">' + content + '</div>'
    })
  }),
  index: false,
  columnWidth: [140,50,50,130],
  align: ['center','center','center','center'],
  oddRowBGC: 'rgb(20,35,72)',
  evenRowBGC: 'rgb(18,28,61)',
  rowNum: 6
})

const mouseoverHandler = (e: any) => {
  console.log(e)
}

const clickHandler = (e: any) => {
  console.log(e)
}

</script>

<template>
    <div class="full-w">
        <SepTitle title="入库出库记录">
            <template #main>
                <div class="main">
                    <dv-scroll-board ref="scrollBoard" :config="config" class="scrollBoard" @mouseover="mouseoverHandler" @click="clickHandler" />
                </div>
            </template>
        </SepTitle>
    </div>
</template>   

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');
.main 
    width 100%
    height 170px

.scrollBoard
    width 100%
    height 100%
    box-sizing border-box;
</style>

